<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm">
      <div class="l-addrygl">
        <!-- <h2>基本信息</h2> -->
        <!-- 返回 -->
        <div class="l-addrygl-1">
          <div></div>
          <div class="l-addrygl-back" @click="back()">返回</div>
          <div class="head-span">材料详情</div>
        </div>

        <div class="l-addrygl-2">
          <div class="l-addrygl-2-1">身份证</div>
          <!-- input框 -->
          <div class="l-addrygl-2-2">
              <div><span>姓名:</span><span class="title-right">{{this.people_name}}</span> </div>
               <div><span>身份证号:</span><span  class="title-right">{{this.people_cardid}}</span></div>
                <div><span>有效期限:</span><span  class="title-right"> {{this.people_cardstart}} ~{{this.people_cardend}} </span>   </div>
            </div>
            <div class="l-addrygl-2-3">
        <span>身份证照片:</span><span class="title-right">吴许</span>

            </div>
        </div>

        <!-- 劳务合同 -->
        <div class="l-addrygl-3">
          <div class="l-addrygl-3-1">证书信息</div>
          <div class="l-addrygl-3-2">
            <!-- 劳务合同表格 -->
            <el-table
              ref="singleTable"
              :data="tableData"
              highlight-current-row
              @current-change="handleCurrentChange"
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
              style="width: 100%"
            >
              <el-table-column align="center" type="index" width="50">
              </el-table-column>
              <el-table-column
                align="center"
                property="date"
                label="专业"
               
              >
              </el-table-column>
              <el-table-column
                align="center"
                property="name"
                label="职称"
               
              >
              </el-table-column>
               <el-table-column
                align="center"
                property="name"
                label="证书号"
               
              >
              </el-table-column>
               <el-table-column
                align="center"
                property="name"
                label="到期时间"
               
              >
              </el-table-column>
              <el-table-column property="do" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="del(scope.$index, scope.row)">删除</el-button>
                  <el-button type="text" @click="del(scope.$index, scope.row)">上传</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="l-addrygl-5">
        <div class="l-tijiao">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>
      </div>
        </div>
    </el-form>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      people_name:"",
      people_cardid:"",
      people_cardend:"",
      people_cardstart:"",
      linput1: [],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        ],
      //    options: [
      //   {
      //     value: 0,
      //     label: "待入场",
      //   },
      //   {
      //     value: 1,
      //     label: "入场",
      //   },
      //   {
      //     value: 2,
      //     label: "离场",
      //   },
      // ],
      ruleForm: {},
    };
  },
  methods: {
    // 表格函数
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
    // 第一行input框值改变
    sechange() {
      for (let i = 0; i < this.linput1.length; i++) {
        if (this.ruleForm.company_id === this.linput1[i].company_id) {
          this.ruleForm.company_code = this.linput1[i].company_code;
          this.ruleForm.company_type_id = this.linput1[
            i
          ].buildCompanyType.company_type_id;
        }
      }
      // console.log(this.linput1.company_code)
    },
    // 提交
    submitForm(){
      // 新增
          http
      .ryglxmbz2({
        group_name: "水电班",
        group_start: "2020-09-23",
        group_end: "2020-11-05",
        people_id: "33",
        company_id: "1",
      })
      .then((res) => {
        console.log(res);
        
      });
       this.$router.push({
        name: "证件到期",
      });
      console.log('参数',this.ruleForm);

    },
    back() {
      this.$router.push({
        name: "证件到期",
      });
    },

  },
  mounted() {
    console.log("接收",this.$route.params)
   this.people_name= this.$route.params.buildPeople.people_name
   this.people_cardid=this.$route.params.buildPeople.people_cardid
   this.people_cardstart=this.$route.params.buildPeople.people_cardstart
   this.people_cardend=this.$route.params.buildPeople.people_cardend
    // http.xmbzsearch({}).then((res) => {
    //   this.linput1 = res.data;
    //   console.log("单位名称", res.data);
    // });
  },
};
</script>
<style scoped>
.l-addrygl{
  height: 650px;
  overflow-y: scroll;
}
.el-input >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.el-form {
  /* margin-left: 20px; */
}
.el-row {
  /* width: 1150px;
  height: 80px;
  margin-top: -2px; */
  /* margin-top: 10px; */
  /* background: blanchedalmond; */
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 239px;
}
.el-col {
  /* width: 1150px; */
  height: 90px;

  /* border: 1px solid gray; */
}
.l-addrygl-1 {
  /* position: fixed;
  top: 0; */
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
  display: flex;
  /* position: relative;  */
  justify-content: left;
  align-items: center;
}
.l-addrygl-3 {
  width: 100%;
  /* height: 282px; */
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.l-addrygl-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
   border-bottom: 1px solid #f2f2f2;
   font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-3-2 {
  /* margin-left: 70px; */
  margin-top: 10px;
}
.l-addrygl-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}
.l-addrygl-2 {
  width: 100%;
  height: 180px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.l-addrygl-2-a{
   width: 100%;
  height: 180px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}

.l-addrygl-2-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-2-2{
    width: 90%;
    margin-left: 30px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.title-right{
    /* display: inline-block; */
    margin-left: 10px;
}
.l-addrygl-2-3{
    margin-left: 25px;
    margin-top: 30px;
}
.l-addrygl-5 {
  
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
}
.l-tijiao {
  margin-top: 10px;
  width: 170px;
  height: 40px;
  float: right;
}
</style>